<template>
    <section class="indexMake">
        <PendingTask ref="PendingTask" :taskTypes="['考核指标内容制定']" :isReview = "'0'" @getCurrentTask="getCurrentTask" @getTaskIndex="getTaskIndex">
            <template slot-scope="props">
                <div :index="props.index" ref="task" v-if="props.index === taskIndex && isShowTaskDetail" class="makeDiv">
                    <div>
                        <TownIndex :taskYear="currentObject.taskYear"  @fatherMethod="submit"></TownIndex>
                    </div>
                </div>
            </template>
        </PendingTask>
        <el-dialog :title="diaTitle" :visible.sync="diaVis" append-to-body :before-close="handClose" class="indexMakeDia">
            <div>
                <el-col :span="3">二级指标：</el-col>
                <el-col :span="21">{{secondIndex.quotaName}}<span style="color: red">&nbsp;&nbsp;({{secondIndex.quotaScore}}分)</span></el-col>
            </div>
            <div>
                <el-col :span="3">三级指标：</el-col>
                <el-col :span="21"><el-input v-model="form.quotaName" :disabled="diaDisabled"></el-input></el-col>
            </div>
            <div>
                <el-col :span="3">指标说明：</el-col>
                <el-col :span="21"><el-input style="width: 500px;" type="textarea"  v-model="form.note" :disabled="diaDisabled"></el-input></el-col>
            </div>
            <div>
                <el-col :span="3">设置分值：</el-col>
                <el-col :span="21"><el-input  v-model="form.score" type="number" :disabled="diaDisabled"></el-input></el-col>
            </div>
            <div v-if="currentIndex=='1'">
                <el-col :span="3">设置权重：</el-col>
                <el-col :span="21">
                    <div v-for="item in form.kpiVillageQuotas" class="weightInput">
                        <div>{{item.districtName}}</div>
                        <el-input type="number" v-model="item.weight" :disabled="diaDisabled"></el-input>
                    </div>
                </el-col>
            </div>
            <div style="clear: both;text-align: right">
                <el-button type="primary"  size="large" :loading="submitLoad" @click="addSubmit()" v-if="!diaDisabled">确定</el-button>
                <el-button size="large" @click="handClose">{{diaDisabled?'关闭':'取消'}}</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import PendingTask from "@/components/PendingTask";
    import TownIndex from "./TownIndex";
    export default {
        name: "IndexMake",
        data(){
            return{
                indexList:[],
                indexDataList:[],
                diaTitle:'',
                diaVis:false,
                form:{},
                villageList:[],
                user:{},
                submitLoad:false,
                secondIndex:{},
                pageLoad:false,
                activeTab:'',
                cardLoad:false,
                currentIndex:'',
                initCun:[],
                currentObject:{},
                taskIndex: -1,
                submitBtnLoading:false,
                diaDisabled:false,
                isShowTaskDetail:true,
            }
        },
        methods:{
            showIndex(year){
                this.pageLoad = true;
                let param = {quotaYear:year,quotaLevel:'1',quotaMakeDepartId:this.user.districtId};
                this.$http('post',`identity/kpiQuota/list?sort=quotaId,desc`, param, false).then(data=>{
                    this.indexList = data.reverse();
                    this.activeTab = this.indexList[0].quotaId;
                    this.currentIndex = this.indexList[0].isSetWeight;
                    this.showList(year,this.indexList[0].quotaId);
                    this.pageLoad = false;
                }).catch(()=>{
                    this.pageLoad = false;
                })
            },
            showList(year,type){
                this.cardLoad = true;
                let param = {districtId:this.user.districtId, parentQuotaId: type};
                this.indexDataList = [];
                this.initCun = [];
                let isDepart = this.user.roleCode.indexOf('DEPART')>-1?'1':'0';
                this.$http('post',`identity/kPITownQuota/getAll?isDepart=${isDepart}`, param, false).then(data=>{
                    this.indexDataList = data;
                    this.initCun = data[0].kpiTownQuotas[0].kpiVillageQuotas;
                    this.cardLoad = false;
                }).catch(()=>{
                    this.cardLoad = false;
                })
            },
            handleTab(tab){
                this.currentIndex = this.indexList[tab.index].isSetWeight;
                this.showList(this.currentObject.taskYear,tab.name);
            },
            addIndex(item){
                if(this.currentObject.status==0){
                    this.diaTitle = '添加';
                    this.diaVis = true;
                    this.diaDisabled = false;
                    this.initVillageWeight(item);
                    this.secondIndex = item;
                    this.form = {
                        districtId:this.user.districtId,
                        districtName:this.user.organizationName,
                        quotaName:'',
                        parentQuotaId:item.quotaId,
                        parentQuotaName:item.quotaName,
                        taskId:this.currentObject.taskId,
                        score:0,
                        quotaYear:this.currentObject.taskYear
                    };
                    if(this.user.roleCode==='TOWN_REVIEWER'){
                        this.form.kpiVillageQuotas = this.villageList;
                    }
                }

            },
            editIndex(sub,item,type){
                if(type=='edit'){
                    this.diaDisabled = false;
                    this.secondIndex = item ;
                    this.diaTitle = '编辑';
                    this.diaVis = true;
                    this.form = Object.assign({},sub);
                }else{
                    this.diaDisabled = true;
                    this.secondIndex = item ;
                    this.diaTitle = '查看';
                    this.diaVis = true;
                    this.form = Object.assign({},sub);
                }
            },
            delIndex(sub){
                if(this.currentObject.status==0){
                    this.$confirm('确定删除当前指标吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$http('DELETE',`identity/kPITownQuota/townAndVillageQuota/${sub.id}`,false).then(data=>{
                            this.$message({
                                type:'success',
                                message:'删除成功'
                            });
                            this.showList(this.currentObject.taskYear,this.activeTab);
                        })
                    }).catch(() => {
                    });
                }else{
                    this.$message({
                        type:'warning',
                        message:'当前不可编辑'
                    })
                }
            },
            handClose(){
                this.diaVis = false;
                this.form = {};
            },
            addSubmit(){
                if(this.form.quotaName.replace(/(^\s+)|(\s+$)/g,"").length>0){
                    this.$http('POST',`identity/kPITownQuota/checkOne`, this.form, false).then(data => {
                      console.log(data, 'data');
                      this.submitLoad = true;
                      this.$http('POST',`identity/kPITownQuota/townAndVillageQuota`,this.form,false).then(data=>{
                          this.$message({
                              type:'success',
                              message:'添加成功'
                          });
                          this.diaVis = false;
                          this.submitLoad = false;
                          this.form = {};
                          this.showList(this.currentObject.taskYear,this.activeTab);
                      }).catch(()=>{
                          this.diaVis = false;
                          this.submitLoad = false;
                          this.form = {};
                      });
                    }).catch(() => {
                      this.$message({
                            type:'warning',
                            message:'指标名称重复！'
                        });
                    })
                }else{
                    this.$message({
                        type:'warning',
                        message:'请输入三级指标名称'
                    });
                }

            },
            initVillageWeight(data){
                if(this.user.roleCode==='TOWN_REVIEWER'){
                    let tempList = JSON.parse(sessionStorage.getItem('towns')).filter(item => item.districtId == this.user.districtId )[0].orgChildren;
                    this.villageList = [];
                    tempList.forEach(item =>{
                        this.villageList.push({
                            weight:1,
                            districtId:item.districtId,
                            districtName:item.districtName,
                            parentDistrictId:this.user.districtId,
                            parentQuotaId:data.quotaId,
                        })
                    })
                }
            },
            getCurrentTask(data){
                this.currentObject = data;
                this.showIndex(this.currentObject.taskYear);
            },
            getTaskIndex(taskIndex) {
                this.taskIndex = taskIndex;
            },
            submit(data) {
                this.submitBtnLoading = true;
                this.$confirm('确认提交该任务么, 是否继续?', '提示', {
                    // confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http("GET", `/identity/cadreTaskObject/confirmByTown?taskObjectId=${this.currentObject.id}&&note=${data}`, false).then(data => {
                        this.submitBtnLoading = false;
                        this.currentObject = data;
                        this.isShowTaskDetail = false;
                        this.$refs.PendingTask.getTaskList();
                        this.$message({
                            type: 'success',
                            message: "提交成功！"
                        });
                    });
                }).catch(() => {
                    this.submitBtnLoading = false;
                });
            },
        },
        components:{
            PendingTask,
            TownIndex
        },
        created() {
            this.user = JSON.parse(sessionStorage.getItem('userInfo'));
        }
    }
</script>

<style scoped >
    .indexMake {
        font-size: 16px;
        line-height: 30px;
        font-family:FZHei-B01S;
    }
     .indexMake .handleContent {
         min-height: 260px;
         margin: 30px 0;
     }
    .indexMake .singleIndex {
        float: left;
        border: 2px solid #43C089;
        width: 227px;
        height: 260px;
        margin: 0 7px 15px 0;
        border-radius: 5px;
    }
    .indexMake .secondTitle{
        width: 100%;
        background: #CFEFE1;
        line-height: 37px;
        height: 37px;
        font-weight: bolder;
        color: #4d4d4d;
        font-size: 14px;
        padding: 0 15px;
    }
    .indexMake .secondTitle:hover{
        background: #43C089;
        color: white;
        cursor: pointer;
    }
    .indexMake .thirdTitle{
        width: 100%;
        height: 37px;
        line-height: 37px;
        font-weight: bold;
        font-size: 14px;
        color: #919191;
        cursor: pointer;
        padding: 0 15px;
        background:rgba(246,255,251,1);
        border-bottom: 1px solid rgba(209,242,227,1);
    }
    .indexMake .resultContent{
        overflow:auto;
        white-space:nowrap;
        line-height: 45px;
        font-size: 16px;
        text-align: center;
        font-weight: bold;
        border-left: 2px solid #43C089;
        border-radius: 5px;
        margin:  30px 0;
    }
    .index_content_scroll {
        overflow: auto;
        height: 218px;
    }
    .indexMake .resultContent::-webkit-scrollbar-thumb,
    .index_content_scroll::-webkit-scrollbar-thumb {
        background-color: #5EC79E!important;
    }
    .indexMake .resultContent::-webkit-scrollbar  {
      height: 12px  /*滚动条高度*/
    }
    .indexMakeDia{
        font-weight: bold;
    }
    .indexMakeDia .weightInput{
        display: inline-block;
        min-width: 100px;
        margin: 5px 10px;
    }
    .indexMake .resultBorder{
        border-right:1px solid #CFEFE1;
        border-bottom:1px solid #CFEFE1
    }
    .indexMake .lastResultBorder{
        border-right:1px solid #CFEFE1;
    }
    .indexMake .outDiv{
        float: left;
        border-top: 2px solid #43C089;
        border-bottom: 2px solid #43C089;
        border-radius: 5px;
    }
    .indexMake .twoIndex{
        width: 200px;
        display: inline-block;
    }
    .indexMake .thirdIndex{
        width: 350px;
        display: inline-block;
    }
    .indexMake .scoreIndex{
        width: 60px;
        display: inline-block;
        color: #FB2626;
        margin-left: -4px;
    }
    .indexMake .cunDetail{
        width: 100px;
        display: inline-block;
        color: #43C089;
    }
    .indexMake .titleLeftIcon{
        clear: both;
        margin: 10px 0;
        width: 140px;
        font-size: 18px;
        font-weight: bold;
        text-align: left;
        border-left: 2px solid #45A14F;
        padding-left: 10px;
        height: 18px;
        line-height: 18px;
        color: #393939;
    }
    .indexMake .statusDiv{
        float: left;
        font-weight: bold;
        margin-right: 16px;
        height: 42px;
        font-size: 14px;
        padding: 1px 37px;
    }
    .indexMake .makeDiv{
        padding: 10px 15px;
        border: 1px rgba(10, 155, 26, 1) solid;
        border-top: none;
        border-radius: 0 0 5px 5px;
        background: #FFFFFF;
    }
    .indexMake .statusButtonDiv{
        margin: 20px 0px;
        height: 42px;
    }
    .indexMake .statusSubmit{
        height: 42px;
        float: left;
        width: 104px;
        font-size: 16px;
        background: #55BD94;
        color: #FFFFFF;
        border-radius: 5px;
    }
</style>
<style>
    .indexMakeDia .weightInput .el-input--mini .el-input__inner{
        width: 80px!important;
    }
    .indexMakeDia .el-dialog__body{
        font-size: 16px;
        line-height: 35px;
    }
    .indexMake .el-tabs--card>.el-tabs__header{
        border-bottom: 2px solid #0A9B1A;
        background: transparent!important;
        margin-top: 5px;
    }
    .indexMake .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
        border-radius: 5px 5px 0 0 ;
        line-height: 32px;
        height: 32px;
        background: #0A9B1A!important;
        color: white;
        margin: 0;
    }
    .indexMake .el-tabs--card>.el-tabs__header .el-tabs__item{
        border-right: none!important;
        border-left: none!important;
        color: #0A9B1A;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        margin: 0;
    }
    .indexMake .el-tabs__item:not(.is-active):hover {
        color: #0a9b1a !important;
    }
</style>
